
      var context;
      var colorBorder = 'black';
      var colorText = 'black';
      var colorHeader = '#6EC6EE';
      var colorCall = '#8ED6FF';
      var colorChange = '#DD88DD';
      
      window.onload = function() {
    	  var canvas = document.getElementById("canvas");
    	  context = canvas.getContext("2d");
    	  
    	  context.myMoveTo = function(x,y){
    		  this.x = x;
    		  this.y = y;
    		  this.moveTo(x, y);
    	  }
    	  context.myMove = function(x,y){
    		  this.x += x;
    		  this.y += y;
    		  this.moveTo(this.x, this.y);
    	  }
    	  context.myRect = function(w,h){
    		  this.rect(this.x, this.y, w, h);
    	  }
    	  context.myText = function(text){
    		  this.fillText(text, this.x, this.y);
    	  }
    	  canvas.onmousedown = function(event) {
    		  mousePos = getMousePos(canvas, event);
    		  canvas.addEventListener('mousemove', dragCanvas, false);
    	  }
    	  canvas.onmouseup = function(event) {
    		  this.removeEventListener('mousemove', dragCanvas, false);

    	  }
    	  var dragCanvas = function(event) {
    		  var newMousePos = getMousePos(canvas, event);
    		  context.myMoveTo(0,0);
    		  context.save();
    		  context.setTransform(1, 0, 0, 1, 0, 0);
    		  context.clearRect(0, 0, canvas.width, canvas.height);
    		  context.restore();
        	  context.translate(newMousePos.x-mousePos.x, newMousePos.y-mousePos.y);
    		  draw(context);
    	      mousePos = newMousePos;
    	  }
    	  function getMousePos(canvas, evt) {
    	        var rect = canvas.getBoundingClientRect(), root = document.documentElement;

    	        // return relative mouse position
    	        var mouseX = evt.clientX - rect.top - root.scrollTop;
    	        var mouseY = evt.clientY - rect.left - root.scrollLeft;
    	        return {
    	          x: mouseX,
    	          y: mouseY
    	        };
    	      }
    	  draw(context);
    	  
        // do stuff here
      };
      
      aHeader = function(clazz, method) {
    	  context.beginPath();
    	  context.myRect(800, 100);
          context.fillStyle = colorHeader;
          context.fill();
          context.lineWidth = 3;
          context.strokeStyle = colorBorder;
          context.stroke();
          
          context.myMove(20, 50);
    	  context.fillStyle = colorText;
          context.font = "14pt Calibri";
          context.myText(clazz + "." + method);
    	  context.myMove(-20, -50);
          context.closePath();
          
          context.myMove(10, 120);
      }
      
      aCall = function(level, clazz, method) {
    	  context.myMove(level*10,0);
          context.beginPath();
    	  context.myRect(400, 50);
          context.fillStyle = colorCall;
          context.fill();
          context.lineWidth = 2;
          context.strokeStyle = colorBorder;
          context.stroke();
          
          context.myMove(10, 30);
    	  context.fillStyle = colorText;
          context.font = "10pt Calibri";
          context.myText(clazz + "." + method);
    	  context.myMove(-10, -30);
          
    	  context.myMove(0, 60);
          context.closePath();
          context.myMove(-level*10,0);
      }
      
      aChangedFile = function(n, clazz, author, log) {
    	  if(n > 0) {
    		  context.myMove(410*n, -110);
    	  }
    	  
    	  context.beginPath();
    	  context.myRect(400, 100);
          context.fillStyle = colorChange;
          context.fill();
          context.lineWidth = 1;
          context.strokeStyle = colorBorder;
          context.stroke();
          
          context.myMove(10, 30);
    	  context.fillStyle = colorText;
          context.font = "10pt Calibri";
          context.myText(clazz);
          context.myMove(0, 30);
          context.myText(author + ": " + log);
          context.myMove(-10, -60);
          
    	  context.myMove(-410*n, 110);
          context.closePath();
      }
      